<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>祝福墙 | 小糯米一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.tailwindcss.com?plugins=forms" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        purple: '#A78BFA',
                        green: '#6BFFB8'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive'],
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .wish-card {
                transition: all 0.3s ease;
                cursor: pointer;
                transform: rotate(var(--rotation, 0deg));
                animation: float var(--float-duration, 6s) ease-in-out infinite;
            }
            .wish-card:hover {
                transform: rotate(0deg) scale(1.05) translateY(-5px);
                z-index: 20;
            }
            .cake-layer {
                border-radius: 50% / 20%;
            }
            .candle-flame {
                animation: flame-flicker 2s infinite alternate;
            }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(var(--rotation, 0deg)); }
            50% { transform: translateY(-15px) rotate(var(--rotation, 0deg)); }
        }
        
        @keyframes flame-flicker {
            0% { transform: scale(1); height: 20px; }
            50% { transform: scale(1.1); height: 22px; }
            100% { transform: scale(0.9); height: 18px; }
        }
        
        @keyframes fade-in {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-blue-50 min-h-screen font-cute overflow-x-hidden relative">
    <!-- 背景音乐 -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <audio id="add-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
    </audio>
    <audio id="success-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 装饰元素 -->
    <div class="fixed top-20 left-5 w-16 h-16 bg-primary/20 rounded-full animate-pulse"></div>
    <div class="fixed top-60 right-10 w-20 h-20 bg-secondary/20 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
    <div class="fixed bottom-40 left-10 w-18 h-18 bg-accent/20 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div>
    
    <!-- 主内容 -->
    <div class="container mx-auto px-4 py-8 relative z-10">
        <!-- 导航 -->
        <nav class="flex justify-between items-center mb-10">
            <a href="index.html" class="text-gray-700 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-2"></i> 首页
            </a>
            <h1 class="text-2xl md:text-3xl font-bold text-primary">祝福墙</h1>
            <div class="w-10"></div> <!-- 占位，保持导航平衡 -->
        </nav>

        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-primary text-shadow mb-4">成长祝福</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">留下你对小糯米的美好祝福，共同见证成长的喜悦</p>
        </div>

        <!-- 添加祝福卡片 -->
        <div class="max-w-2xl mx-auto mb-16 bg-white rounded-2xl shadow-xl p-6 md:p-8 transform transition-all hover:shadow-2xl">
            <h3 class="text-xl font-bold text-primary mb-6 text-center">写下你的祝福</h3>

            <form id="wish-form" class="space-y-4">
                <div>
                    <label for="name" class="block text-gray-700 mb-2">你的名字</label>
                    <input type="text" id="name" name="name" required
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                        placeholder="请输入你的名字">
                </div>

                <div>
                    <label for="content" class="block text-gray-700 mb-2">祝福内容</label>
                    <textarea id="content" name="content" rows="4" required
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none"
                        placeholder="请写下对小糯米的祝福..."></textarea>
                </div>

                <div>
                    <label class="block text-gray-700 mb-2">选择卡片颜色</label>
                    <div class="flex gap-3 flex-wrap">
                        <button type="button" class="color-option w-8 h-8 rounded-full bg-primary border-2 border-transparent focus:border-gray-500" data-color="#FF6B9B"></button>
                        <button type="button" class="color-option w-8 h-8 rounded-full bg-secondary border-2 border-transparent focus:border-gray-500" data-color="#6BCBFF"></button>
                        <button type="button" class="color-option w-8 h-8 rounded-full bg-accent border-2 border-transparent focus:border-gray-500" data-color="#FFD66B"></button>
                        <button type="button" class="color-option w-8 h-8 rounded-full bg-purple border-2 border-transparent focus:border-gray-500" data-color="#A78BFA"></button>
                        <button type="button" class="color-option w-8 h-8 rounded-full bg-green border-2 border-transparent focus:border-gray-500" data-color="#6BFFB8"></button>
                    </div>
                    <input type="hidden" id="color" name="color" value="#FF6B9B">
                </div>

                <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary text-white font-bold py-3 px-6 rounded-lg shadow-md hover:opacity-90 transition-opacity transform hover:scale-[1.02] active:scale-[0.98]">
                    提交祝福 <i class="fa fa-heart ml-2"></i>
                </button>
            </form>
        </div>

        <!-- 祝福展示区 -->
        <div id="wishes-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto mb-20">
            <!-- 祝福卡片将通过JS动态生成 -->
        </div>

        <!-- 背景蛋糕装饰 (仅在大屏幕显示) -->
        <div class="hidden lg:block fixed bottom-0 right-0 w-1/3 h-2/3 pointer-events-none z-0 opacity-20">
            <!-- 蛋糕底座 -->
            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1/3 bg-primary cake-layer"></div>
            <!-- 蛋糕中层 -->
            <div class="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 w-2/3 h-1/3 bg-secondary cake-layer"></div>
            <!-- 蛋糕顶层 -->
            <div class="absolute bottom-2/3 left-1/2 transform -translate-x-1/2 w-1/2 h-1/3 bg-accent cake-layer"></div>

            <!-- 蜡烛 -->
            <div class="absolute bottom-[70%] left-1/2 transform -translate-x-1/2 w-4 h-16 bg-white rounded-t-md"></div>
            <div class="absolute bottom-[80%] left-1/2 transform -translate-x-1/2 w-3 h-6 bg-yellow-300 rounded-full candle-flame"></div>
        </div>
    </div>

    <!-- 成功提示 -->
    <div id="success-toast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg opacity-0 pointer-events-none transition-opacity z-50">
        祝福添加成功！
    </div>

    <script>
        // 祝福数据
        let wishesData = [];
        // 选中的颜色
        let selectedColor = '#FF6B9B';

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载初始祝福
            loadWishes();

            // 初始化颜色选择
            initColorSelection();

            // 绑定表单提交事件
            document.getElementById('wish-form').addEventListener('submit', function(e) {
                e.preventDefault();
                addNewWish();
            });

            // 播放背景音乐
            const music = document.getElementById('background-music');
            music.volume = 0.3;
            music.play().catch(e => {
                console.log('需要用户交互才能播放音乐:', e);
                document.addEventListener('click', () => {
                    music.play();
                }, { once: true });
            });
        });

        // 加载祝福数据
        function loadWishes() {
            // 先从本地存储加载
            const savedWishes = localStorage.getItem('birthdayWishes');
            if (savedWishes) {
                wishesData = JSON.parse(savedWishes);
            } else {
                // 加载默认祝福
                fetch('data/content.json')
                    .then(response => response.json())
                    .then(data => {
                        wishesData = data.defaultWishes || [];
                        renderWishes();
                    });
                return;
            }

            renderWishes();
        }

        // 渲染祝福卡片
        function renderWishes() {
            const container = document.getElementById('wishes-container');
            container.innerHTML = '';

            // 如果没有祝福
            if (wishesData.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-16">
                        <i class="fa fa-comment-o text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">还没有祝福哦，快来写下第一个祝福吧！</p>
                    </div>
                `;
                return;
            }

            // 渲染所有祝福
            wishesData.forEach((wish, index) => {
                // 随机旋转角度和动画持续时间，让卡片看起来更自然
                const rotation = (Math.random() * 6) - 3; // -3到3度之间
                const floatDuration = 5 + Math.random() * 3; // 5到8秒之间

                const wishCard = document.createElement('div');
                wishCard.className = 'wish-card bg-white rounded-xl shadow-lg p-6 relative overflow-hidden';
                wishCard.style.setProperty('--rotation', `${rotation}deg`);
                wishCard.style.setProperty('--float-duration', `${floatDuration}s`);
                wishCard.style.animationDelay = `${index * 0.1}s`;

                // 卡片顶部颜色条
                wishCard.innerHTML = `
                    <div class="absolute top-0 left-0 right-0 h-2" style="background-color: ${wish.color}"></div>
                    <div class="relative">
                        <h4 class="font-bold text-lg mb-2 flex items-center">
                            <i class="fa fa-user-circle-o mr-2" style="color: ${wish.color}"></i>
                            ${wish.name}
                        </h4>
                        <p class="text-gray-600 mb-4">${wish.content}</p>
                        <div class="text-right text-sm text-gray-400">
                            ${formatDate(wish.date)}
                        </div>
                    </div>
                `;

                container.appendChild(wishCard);
            });
        }

        // 初始化颜色选择
        function initColorSelection() {
            const colorOptions = document.querySelectorAll('.color-option');

            // 设置初始选中状态
            colorOptions[0].classList.add('ring-2', 'ring-gray-500');

            colorOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除所有选中状态
                    colorOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-gray-500'));

                    // 设置当前选中状态
                    this.classList.add('ring-2', 'ring-gray-500');

                    // 保存选中的颜色
                    selectedColor = this.dataset.color;
                    document.getElementById('color').value = selectedColor;
                });
            });
        }

        // 添加新祝福
        function addNewWish() {
            const nameInput = document.getElementById('name');
            const contentInput = document.getElementById('content');

            // 获取输入值
            const name = nameInput.value.trim();
            const content = contentInput.value.trim();
            const color = selectedColor;

            // 验证输入
            if (!name || !content) {
                alert('请填写姓名和祝福内容');
                return;
            }

            // 创建新祝福对象
            const newWish = {
                id: Date.now(),
                name: name,
                content: content,
                color: color,
                date: new Date().toISOString()
            };

            // 添加到祝福列表
            wishesData.unshift(newWish);

            // 保存到本地存储
            localStorage.setItem('birthdayWishes', JSON.stringify(wishesData));

            // 重新渲染祝福列表
            renderWishes();

            // 重置表单
            nameInput.value = '';
            contentInput.value = '';

            // 播放音效
            document.getElementById('add-sound').play();

            // 显示成功提示
            showToast();

            // 创建彩屑效果
            createConfetti();
        }

        // 显示提示框
        function showToast() {
            const toast = document.getElementById('success-toast');
            toast.classList.remove('opacity-0');
            toast.classList.add('opacity-100');

            setTimeout(() => {
                toast.classList.remove('opacity-100');
                toast.classList.add('opacity-0');
            }, 3000);
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        }

        // 创建彩屑效果
        function createConfetti() {
            const colors = ['#FF6B9B', '#6BCBFF', '#FFD66B', '#A78BFA', '#6BFFB8'];
            const container = document.body;

            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti absolute';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.width = Math.random() * 10 + 5 + 'px';
                confetti.style.height = Math.random() * 10 + 5 + 'px';
                confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;

                container.appendChild(confetti);

                // 动画结束后移除
                setTimeout(() => {
                    confetti.remove();
                }, 5000);
            }
        }
    </script>
</body>
</html>